<template>
  <MyVanskeleton :loading="loading">
    <template v-slot:my-content>
      <div>
        <NavBar :title="title" />
        <div class="content-top resume-edit">
          <!-- 完善度 -->
          <div class="perfect">
            <p>
              <b>{{ score }}</b>
            </p>
            <van-progress :percentage="resumeFinishCount" pivot-text="" stroke-width="14" color="linear-gradient(to right, #05A6F0, #05A6F0)" style="border-radius: 12px; margin: 16px 0 20px" />
            <ul>
              <li v-if="!evaluationInfo" @click="onSelfClick"><span>自我评价未添加</span></li>
              <li v-if="licenseList.length == 0" @click="onZSClick"><span>所获证书未添加</span></li>
              <li v-if="skillList.length == 0" @click="onSkillClick"><span>专业技能未添加</span></li>
              <li v-if="addList.length == 0" @click="onAddInfoClick"><span>附加信息未添加</span></li>
            </ul>
          </div>

          <!-- 简历编辑 -->
          <div class="resume">
            <!-- 基本信息 -->
            <div class="module">
              <div class="title">
                <b>基本信息</b>
                <span @click="onBaseInfoClick">
                  <van-icon name="edit" size="15" />编辑
                </span>
              </div>
              <div class="box basic">
                <b>{{ basicInfo.personName }}</b>
                <p>
                  <span>{{ basicInfo.sex }}</span>
                  <span>{{ basicInfo.age }}岁</span>
                  <span>{{ basicInfo.edu }}学历</span>
                  <span>{{ basicInfo.workYears }}工作经验</span>
                </p>
              </div>
            </div>

            <!-- 求职意向 -->
            <div class="module">
              <div class="title">
                <b>求职意向</b>
                <span @click="onJobWantedClick()">
                  <van-icon name="edit" size="15" />编辑
                </span>
              </div>
              <div class="box hope" v-if="jwInfo != null">
                <p>
                  <label>工作性质</label>
                  <span>{{ jwInfo.job_Type }}</span>
                </p>
                <p>
                  <label>期望薪资</label>
                  <span>{{jwInfo.salaryValue}}</span>
                </p>
                <p>
                  <label>期望行业</label>
                  <span>{{ jwInfo.tradesValueStr == null ? '未添加':jwInfo.tradesValueStr }}</span>
                </p>
                <p>
                  <label>期望职位</label>
                  <span>{{ jwInfo.positionsValueStr }}</span>
                </p>
                <p>
                  <label>期望地区</label>
                  <span>{{ jwInfo.areasValueStr }}</span>
                </p>
              </div>
              <div class="null" v-else>
                <span>您对自己有什么职业规划，<br />希望自己从事什么样的工作呢？</span>
              </div>
            </div>

            <!-- 教育培训 -->
            <div class="module">
              <div class="title">
                <b>教育培训</b>
                <span @click="onEduInfoClick(null)">
                  <van-icon name="add-o" size="15" />添加
                </span>
              </div>
              <ul class="box list02" v-if="eduList.length > 0">
                <van-swipe-cell v-for="(item, index) in eduList" :key="index">
                  <li @click="onEduInfoClick(item)">
                    <b>{{ item.school_Na }}</b>
                    <span v-if="item.specialty != null && item.specialty != ''">{{ item.level_EduValue }} |
                      {{ item.specialtyValue }}</span>
                    <span v-else>{{ item.level_EduValue }}</span>
                    <span v-if="item.date_Time != null && item.Date_Time != ''">{{ item.date_Time }}</span>
                    <span v-if="item.content != null && item.content != ''" class="van-multi-ellipsis--l2">{{ item.content }}</span>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" @click="onDelEdu(item, index)" />
                  </template>
                </van-swipe-cell>
              </ul>
              <div class="null" v-else>
                <span>教育培训经历最能体现您的学历和专业能力，<br />快来完成它吸引企业和HR青睐吧！</span>
              </div>
            </div>

            <!-- 工作经历 -->
            <div class="module">
              <div class="title">
                <b>工作经历</b>
                <span @click="onWorkClick(null)">
                  <van-icon name="add-o" size="15" />添加
                </span>
              </div>
              <ul class="box list02" v-if="workList.length > 0">
                <van-swipe-cell v-for="(item, index) in workList" :key="index">
                  <li @click="onWorkClick(item)">
                    <b>{{ item.company_Na }}</b>
                    <span>{{ item.company_TypeValue }} |
                      {{ item.trade_Value }}</span>
                    <span>{{ item.date_Time}}</span>
                    <span v-if="item.content != null && item.content != ''" class="van-multi-ellipsis--l2">{{ item.content }}</span>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" @click="onDelWork(item, index)" />
                  </template>
                </van-swipe-cell>
              </ul>
              <div class="null" v-else>
                <span>工作经历最能体现您丰富的阅历和出众的工作能力，<br />是你薪酬翻倍的筹码哦！</span>
              </div>
            </div>

            <!-- 自我评价 -->
            <div class="module">
              <div class="title">
                <b>自我评价</b>
                <span @click="onSelfClick">
                  <van-icon name="edit" size="15" />编辑
                </span>
              </div>

              <div class="box myself" v-if="evaluationInfo">
                <span v-html="evaluationInfo.evaluation"></span>
              </div>
              <div class="null" v-else>
                <span>客观全面的自我评价更容易获得企业的好感，<br />快来完善以获得HR的亲睐！</span>
              </div>
            </div>

            <!-- 专业技能 -->
            <div class="module">
              <div class="title">
                <b>专业技能</b>
                <span @click="onSkillClick(null)">
                  <van-icon name="add-o" size="15" />添加
                </span>
              </div>
              <ul class="box list01" v-if="skillList.length > 0">
                <van-swipe-cell v-for="(item, index) in skillList" :key="index">
                  <li @click="onSkillClick(item)">
                    <span>{{ item.skill_Name }}</span>
                    <i></i>
                    <span>{{ item.skill_level }}</span>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" style="height: 100%" @click="onDelSkill(item, index)" />
                  </template>
                </van-swipe-cell>
              </ul>
              <div class="null" v-else>
                <span>专业技能是提升求职竞争力的法宝，<br />千万别谦虚啊！</span>
              </div>
            </div>

            <!-- 获得证书 -->
            <div class="module">
              <div class="title">
                <b>获得证书</b>
                <span @click="onZSClick(null)">
                  <van-icon name="add-o" size="15" />添加
                </span>
              </div>
              <ul class="box list01" v-if="licenseList.length > 0">
                <van-swipe-cell v-for="(item, index) in licenseList" :key="index">
                  <li @click="onZSClick(item)">
                    <span>{{ item.date_Time }}</span>
                    <i></i>
                    <span>{{ item.license_NameValue }}</span>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" style="height: 100%" @click="onDelZS(item, index)" />
                  </template>
                </van-swipe-cell>
              </ul>
              <div class="null" v-else>
                <span>证书是您驰骋职场的敲门砖。 您有哪些证书呢？</span>
              </div>
            </div>

            <!-- 附加信息 -->
            <div class="module">
              <div class="title">
                <b>附加信息</b>
                <span @click="onAddInfoClick(null)">
                  <van-icon name="add-o" size="15" />添加
                </span>
              </div>
              <ul class="box list03" v-if="addList.length > 0">
                <van-swipe-cell v-for="(item, index) in addList" :key="index" style="margin-bottom: 20px">
                  <li @click="onAddInfoClick(item)">
                    <b>{{ item.t_Name.replace("O_", "") }}</b>
                    <span>{{ item.information }}</span>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" style="height: 100%" @click="onDelAddInfo(item, index)" />
                  </template>
                </van-swipe-cell>
              </ul>
              <div class="null" v-else>
                <span>完善其他信息，丰富简历，让HR更了解你！</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MyVanskeleton>
</template>
  
<script>
import NavBar from "@/components/NavBar.vue";
import { Progress, Button, Icon, SwipeCell, Dialog, Toast } from "vant";
import {
  PersonGetResumeAll,
  PersonResumeDelEduInfo,
  PersonResumeDelWorkInfo,
  PersonResumeDelSkillInfo,
  PersonResumeDelLicenseInfo,
  PersonResumeDelAddInfo,
} from "@/util/http";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
import {
  GetEdu,
  GetZYMain,
  GetZYTwo,
  GetCompanyType,
  GetCompanyHY,
  GetMonthPay,
  GetAreaCitys,
  GetJobZNTwo,
  GetJobZNThree,
} from "@/util/selectData";
import Global from "@/Global";
import encrypt from '@/util/encrypt';
export default {
  name: "ResumeAll",
  components: {
    NavBar,
    MyVanskeleton,
    [Progress.name]: Progress,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [SwipeCell.name]: SwipeCell,
  },
  props: ["title"],
  mounted() {
    this.init();
    this.$bus.$on(Global.bus_person_resume_update, () => {
      this.init();
    });
  },
  // 定义属性
  data() {
    return {
      loading: false,
      score: 0,
      basicInfo: {},
      jwInfo: {},
      eduList: [],
      workList: [],
      evaluationInfo: {},
      skillList: [],
      licenseList: [],
      addList: [],
    };
  },
  computed: {
    resumeFinishCount() {
      let i = 0;
      if (this.basicInfo) { i += 3; }
      if (this.jwInfo) { i++; }
      if (this.eduList.length > 0) { i++; }
      if (this.workList.length > 0) { i++; }
      if (this.evaluationInfo) { i++; }
      if (this.licenseList.length > 0) { i++; }
      if (this.skillList.length > 0) { i++; }
      if (this.addList.length > 0) { i++; }
      return i * 10;
    }
  },
  // 方法集合
  methods: {
    init() {
      this.loading = true;
      this.$api.get('/Resume/GetResumeAllForPersonUI').then(res => {
        this.loading = false;
        if (res.success) {
          let data = res.response;
          this.score = data.score;
          this.basicInfo = data.basicInfo;
          this.jwInfo = data.jwInfo;
          this.eduList = data.eduList;
          this.workList = data.workList;
          this.evaluationInfo = data.evaluationInfo;
          this.skillList = data.skillList
          this.licenseList = data.licenseList;
          this.addList = data.addList;
        }
        else { Toast.fail(res.msg) }
      })
    },
    getMonthPayVal(id) {
      if (id === undefined) return;
      let item = GetMonthPay().filter((i) => {
        return i.itemID === id;
      })[0];
      return item.itemVal;
    },
    getAreaVal(ids) {
      if (ids === undefined) return;
      let str = [];
      for (let i = 0; i < ids.split(",").length; i++) {
        let id = ids.split(",")[i];
        let item = GetAreaCitys().filter((data) => {
          return data.itemID === id;
        })[0];
        str.push(item.itemVal);
      }
      return str.join();
    },
    getZNVal(ids) {
      if (ids === undefined) return;
      let str = [];
      for (let i = 0; i < ids.split(",").length; i++) {
        let id = ids.split(",")[i];
        let item = GetJobZNThree().filter((data) => {
          return data.id === id;
        })[0];
        str.push(item.value);
      }
      return str.join();
    },
    getEduVal(id) {
      let item = GetEdu().filter((i) => {
        return i.itemID === id;
      })[0];
      return item.itemVal;
    },
    getZYVal(id) {
      let item1 = GetZYMain().filter((i) => {
        return i.itemID === id.substring(0, 2);
      })[0];
      let item2 = GetZYTwo().filter((i) => {
        return i.itemID === id;
      })[0];
      //console.log(id, item1, item2);
      return item1.itemVal + "->" + item2.itemVal;
    },
    getCompanyTypeVal(id) {
      if (id == null || id == "00") return "所有";
      let item = GetCompanyType().filter((i) => {
        return i.itemID === id;
      })[0];
      return item.itemVal;
    },
    getCompanyHYVal(ids) {
      if (ids === undefined) return;
      let str = [];
      for (let i = 0; i < ids.split(",").length; i++) {
        let id = ids.split(",")[i];
        let item = GetCompanyHY().filter((data) => {
          return data.itemID === id;
        })[0];
        str.push(item.itemVal);
      }
      return str.join();
    },
    onAddClick(item) {
      let value = item.itemID;
      console.log(value);
      if (value === "求职意向") {
        this.onJobWantedClick();
      } else if (value === "教育经历") {
        this.onEduInfoClick(null);
      } else if (value === "工作经历") {
        this.onWorkClick(null);
      } else if (value === "自我评价") {
        this.onSelfClick();
      } else if (value === "专业技能") {
        this.onSkillClick();
      } else if (value === "证书情况") {
        this.onZSClick(null);
      } else if (value === "附加信息") {
        this.onAddInfoClick(null);
      }
    },
    //基本信息
    onBaseInfoClick() {
      this.$router.push({
        name: "person-resume-baseinfo",
        params: { data: this.basicInfo },
      });
    },
    //求职意向
    onJobWantedClick() {
      this.$router.push({
        name: "person-resume-jobwanted",
        params: { data: this.resume_jobwanted },
      });
    },
    //教育培训
    onEduInfoClick(item) {
      this.$router.push({ name: "person-resume-edu", params: { data: item } });
    },
    //工作经历
    onWorkClick(item) {
      this.$router.push({ name: "person-resume-work", params: { data: item } });
    },
    //自我评价
    onSelfClick() {
      this.$router.push({
        name: "person-resume-self",
        params: { data: this.resume_self },
      });
    },
    //专业技能
    onSkillClick(item) {
      this.$router.push({
        name: "person-resume-skill",
        params: { data: item },
      });
    },
    //获得证书
    onZSClick(item) {
      this.$router.push({ name: "person-resume-zs", params: { data: item } });
    },
    //附加信息
    onAddInfoClick(item) {
      this.$router.push({
        name: "person-resume-addinfo",
        params: { data: item },
      });
    },
    //删除教育培训
    onDelEdu(item, index) {
      Dialog.confirm({ message: "确认删除该教育培训？" }).then(() => {
        this.$api.post('/Resume/DeleteEdu?encrptyID=' + encodeURIComponent(encrypt.AESencrypt(item.id))).then(res => {
          if (res.success) {
            Toast.success('删除成功');
            this.eduList.splice(index, 1);
          }
        })
      })
    },
    //删除工作经历
    onDelWork(item, index) {
      Dialog.confirm({ message: "确认删除该工作经历？", }).then(() => {
        this.$api.post('/Resume/DeleteWork?encrptyID=' + encodeURIComponent(encrypt.AESencrypt(item.id))).then(res => {
          if (res.success) {
            Toast.success('删除成功');
            this.workList.splice(index, 1);
          }
        })
      })
    },
    //删除专业技能
    onDelSkill(item, index) {
      Dialog.confirm({ message: "确认删除该专业技能？", }).then(() => {
        this.$api.post('/Resume/DeleteSkill?encrptyID=' + encodeURIComponent(encrypt.AESencrypt(item.id))).then(res => {
          if (res.success) {
            Toast.success('删除成功');
            this.skillList.splice(index, 1);
          }
        })
      })
    },
    //删除附加信息
    onDelAddInfo(item, index) {
      Dialog.confirm({ message: "确认删除该附加信息？", }).then(() => {
        this.$api.post('/Resume/DeleteAddInfo?encrptyID=' + encodeURIComponent(encrypt.AESencrypt(item.id))).then(res => {
          if (res.success) {
            Toast.success('删除成功');
            this.addList.splice(index, 1);
          }
        })
      })
    },
    //删除证书
    onDelZS(item, index) {
      Dialog.confirm({ message: "确认删除该证书？", }).then(() => {
        this.$api.post('/Resume/DeleteLicense?encrptyID=' + encodeURIComponent(encrypt.AESencrypt(item.id))).then(res => {
          if (res.success) {
            Toast.success('删除成功');
            this.licenseList.splice(index, 1);
          }
        })
      })
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

/* 完善度 */
.resume-edit .perfect {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  margin-bottom: 10px;
  background-color: #fff;
}

.resume-edit .perfect p {
  display: flex;
  align-items: center;
}

.resume-edit .perfect p b {
  font-size: 18px;
  color: #f60;
  line-height: 18px;
}

.resume-edit .perfect p b::before {
  content: "简历评分：";
  color: #000;
}

.resume-edit .perfect ul {
  display: flex;
  flex-direction: column;
}

.resume-edit .perfect ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.resume-edit .perfect ul li + li {
  margin-top: 10px;
}

.resume-edit .perfect ul li span {
  display: flex;
  flex: 1;
  padding-left: 10px;
  font-weight: 400;
  color: #c8c8c8;
}

.resume-edit .perfect ul li::after {
  content: "优化";
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 15px;
  border-radius: 24px;
  background: linear-gradient(to right, #05a6f0, #05a6f0);
  font-size: 13px;
  color: #fff;
}

/* 简历编辑 */
.resume-edit .resume {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  background-color: #fff;
}

.resume-edit .resume .module {
  display: flex;
  flex-direction: column;
  padding: 28px 0;
}

.resume-edit .resume .module + .module {
  border-top: 0.5px solid #e8e8e8;
}

.resume-edit .resume .title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resume-edit .resume .title b {
  font-size: 17px;
  color: #000;
}

.resume-edit .resume .title span {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 6px 0 4px;
  border: 1px solid rgba(5, 166, 240, 0.7);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: #05a6f0;
}

.resume-edit .resume .title span i {
  margin-right: 3px;
}

.resume-edit .resume .null {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}

.resume-edit .resume .null span {
  font-size: 13px;
  color: #c5c5c5;
  text-align: center;
}

.resume-edit .resume .box {
  display: flex;
  flex-direction: column;
  padding: 0 1px;
  margin-top: 28px;
}

.resume-edit .resume .myself span {
  display: -webkit-box;
  font-size: 14px;
  color: #444;
  line-height: 26px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}

.resume-edit .resume .basic {
  justify-content: space-between;
  height: 48px;
}

.resume-edit .resume .basic b {
  font-size: 18px;
  color: #000;
  line-height: 18px;
}

.resume-edit .resume .basic p {
  display: flex;
  align-items: center;
}

.resume-edit .resume .basic span {
  font-size: 14px;
  color: #333;
  line-height: 14px;
}

.resume-edit .resume .basic span + span {
  position: relative;
  padding-left: 12px;
  margin-left: 8px;
}

.resume-edit .resume .basic span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: -3px;
  background-color: #c8c8c8;
}

.resume-edit .resume .hope p {
  display: flex;
  font-size: 14px;
}

.resume-edit .resume .hope p + p {
  margin-top: 12px;
}

.resume-edit .resume .hope p label {
  display: flex;
  flex: 0 0 76px;
  font-weight: 300;
  color: #888;
}

.resume-edit .resume .hope p span {
  display: flex;
  flex: 1;
  color: #333;
}

.resume-edit .resume .list01 li {
  display: flex;
  align-items: center;
}

.resume-edit .resume .list01 li span {
  font-size: 14px;
  color: #333;
  line-height: 30px;
}

.resume-edit .resume .list01 li span:last-child {
  min-width: 54px;
}

.resume-edit .resume .list01 li i {
  width: 8px;
  height: 1px;
  margin: 0 8px;
  background-color: #aaa;
}

.resume-edit .resume .list02 li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  padding-bottom: 26px;
  overflow: hidden;
}

.resume-edit .resume .list02 li:last-child {
  padding-bottom: 0;
}

.resume-edit .resume .list02 li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 10;
  width: 5px;
  height: 5px;
  border: 2px solid #f80;
  border-radius: 50%;
  background-color: #fff;
}

.resume-edit .resume .list02 li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background-color: #f2f2f2;
}

.resume-edit .resume .list02 li:first-child::after {
  top: 6px;
}

.resume-edit .resume .list02 li b {
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.resume-edit .resume .list02 li span {
  margin-top: 6px;
  font-size: 14px;
  color: #888;
}

.resume-edit .resume .list02 li span + span {
  font-weight: 300;
  font-size: 13px;
  color: #a8a8a8;
}

.resume-edit .resume .list03 li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.resume-edit .resume .list03 li + li {
  margin-top: 26px;
}

.resume-edit .resume .list03 li b {
  font-size: 16px;
  color: #333;
}

.resume-edit .resume .list03 li span {
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}
</style>
